<template>
  <div class="MyBackground">
    <el-card class="box-card" v-show="open">
      <div class="block">
        <el-tooltip
          :disabled="disabled"
          :content="DisplayText"
          placement="bottom"
          effect="light"
        >
          <el-select
            multiple
            collapse-tags
            v-model="selectedArray"
            @change="changeSelect"
            @remove-tag="removeTag"
            placeholder="请选择"
          >
            <el-option
              label="全选"
              value="全选"
              @click.native="selectAll"
            ></el-option>
            <el-option
              v-for="(item, index) in optionsrea"
              :key="index"
              :label="item.label"
              :value="item.name"
            ></el-option>
          </el-select>
        </el-tooltip>
      </div>
      <div class="block">
        <el-row>
          <el-radio-group v-model="isCollapse" style="margin-right: 20px">
            <el-radio-button label="date">日</el-radio-button>
            <el-radio-button label="week">周</el-radio-button>
            <el-radio-button label="month">月</el-radio-button>
            <el-radio-button label="year">年</el-radio-button>
          </el-radio-group>
          <el-date-picker
            v-model="value1"
            :type="this.isCollapse"
            :format="Format"
            placeholder="选择日期"
            :picker-options="pickerOptions0"
          >
          </el-date-picker>
          <el-button type="text" @click="a" style="margin-left: 230px">
            +{{ this.WrittenWords }}
          </el-button>
          <el-date-picker
            style="margin-left: 20px;"
            v-show="ShowAndHide"
            v-model="value2"
            :type="this.isCollapse"
            :format="Format"
            placeholder="选择日期"
            :picker-options="pickerOptions0"
          >
          </el-date-picker>
        </el-row>
      </div>
      <br />
      <br />
      <div class="merge">
        <span class="demonstration"> 选择日期范围 </span>
        <el-date-picker
          v-model="value2"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
      </div>
      <div class="merge">
        <span class="demonstration"> 选择月份范围 </span>
        <el-date-picker
          v-model="value2"
          type="monthrange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始月份"
          end-placeholder="结束月份"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
      </div>
    </el-card>

    <el-card style="margin-top: 20px;height:300px;">
      <div id="main" style="width: 40%; height: 400px"></div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      disabled: false,
      DisplayText: "",
      selectedArray: [],
      optionsrea: [
        { name: "选项1", label: "黄金糕" },
        { name: "选项2", label: "双皮奶" },
        { name: "选项3", label: "蚵仔煎" },
        { name: "选项4", label: "龙须面" },
        { name: "选项5", label: "北京烤鸭" },
      ],
      WrittenWords: "添加对比",
      ShowAndHide: false,
      Format: "",
      //   获取时间   返回当前时间的开头时间  格式化时间
      // dayjs(date[0]).startOf(that.type).format('YYYY-MM-DD')
      //   获取时间   返回当前时间的末尾时间  格式化时间
      // dayjs(date[1]).endOf(that.type).format('YYYY-MM-DD')
      //      赋值                调用时间              获取当前时间的时间戳 修改
      // this.startDate = new Date(this.startDate).getTime() + 3600 * 1000 * 24
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      SelectAll: [],
      value8: [],
      value9: [],
      value1: "",
      value2: "",
      value3: 0,
      value4: [],
      value5: "",
      value6: [],
      value7: "",
      startDate: "YYYY - MM - DD",
      tabPosition: "left",
      open: true,
      isCollapse: "date",
      pickerOptions0: {
        disabledDate(time) {
          let curDate = new Date().getTime();
          let three = 365 * 24 * 3600 * 1000;
          let threeMonths = curDate - three;
          return time.getTime() > Date.now() || time.getTime() < threeMonths;
        },
      },
    };
  },
  watch: {
    selectedArray: {
      handler() {
        this.selectedArray == ""
          ? (this.disabled = true)
          : (this.disabled = false);
      },
      immediate: true,
      deep: true,
    },
    isCollapse: {
      handler(add) {
        console.log(add);
        this.DateFormat(add);
      },
      immediate: true,
      deep: true,
    },
  },
  mounted(){
    // this.inMapChart();
  },
  methods: {
    inMapChart() {
      let chartDom = document.getElementById("main");
      let myChart = this.$echarts.init(chartDom);
      let option;

      option = {
        series: [
          {
            name: "hour",
            type: "gauge",
            startAngle: 90,
            endAngle: -270,
            min: 0,
            max: 12,
            splitNumber: 12,
            clockwise: true,
            axisLine: {
              lineStyle: {
                width: 5,
                color: [[1, "rgba(0,0,0,0.7)"]],
                shadowColor: "rgba(0, 0, 0, 0.5)",
                shadowBlur: 15,
              },
            },
            splitLine: {
              lineStyle: {
                shadowColor: "rgba(0, 0, 0, 0.3)",
                shadowBlur: 3,
                shadowOffsetX: 1,
                shadowOffsetY: 2,
              },
            },
            axisLabel: {
              fontSize: 20,
              distance: 25,
              formatter: function (value) {
                if (value === 0) {
                  return "";
                }
                return value + "";
              },
            },
            anchor: {
              show: true,
              icon: "path://M532.8,70.8C532.8,70.8,532.8,70.8,532.8,70.8L532.8,70.8C532.7,70.8,532.8,70.8,532.8,70.8z M456.1,49.6c-2.2-6.2-8.1-10.6-15-10.6h-37.5v10.6h37.5l0,0c2.9,0,5.3,2.4,5.3,5.3c0,2.9-2.4,5.3-5.3,5.3v0h-22.5c-1.5,0.1-3,0.4-4.3,0.9c-4.5,1.6-8.1,5.2-9.7,9.8c-0.6,1.7-0.9,3.4-0.9,5.3v16h10.6v-16l0,0l0,0c0-2.7,2.1-5,4.7-5.3h10.3l10.4,21.2h11.8l-10.4-21.2h0c6.9,0,12.8-4.4,15-10.6c0.6-1.7,0.9-3.5,0.9-5.3C457,53,456.7,51.2,456.1,49.6z M388.9,92.1h11.3L381,39h-3.6h-11.3L346.8,92v0h11.3l3.9-10.7h7.3h7.7l3.9-10.6h-7.7h-7.3l7.7-21.2v0L388.9,92.1z M301,38.9h-10.6v53.1H301V70.8h28.4l3.7-10.6H301V38.9zM333.2,38.9v10.6v10.7v31.9h10.6V38.9H333.2z M249.5,81.4L249.5,81.4L249.5,81.4c-2.9,0-5.3-2.4-5.3-5.3h0V54.9h0l0,0c0-2.9,2.4-5.3,5.3-5.3l0,0l0,0h33.6l3.9-10.6h-37.5c-1.9,0-3.6,0.3-5.3,0.9c-4.5,1.6-8.1,5.2-9.7,9.7c-0.6,1.7-0.9,3.5-0.9,5.3l0,0v21.3c0,1.9,0.3,3.6,0.9,5.3c1.6,4.5,5.2,8.1,9.7,9.7c1.7,0.6,3.5,0.9,5.3,0.9h33.6l3.9-10.6H249.5z M176.8,38.9v10.6h49.6l3.9-10.6H176.8z M192.7,81.4L192.7,81.4L192.7,81.4c-2.9,0-5.3-2.4-5.3-5.3l0,0v-5.3h38.9l3.9-10.6h-53.4v10.6v5.3l0,0c0,1.9,0.3,3.6,0.9,5.3c1.6,4.5,5.2,8.1,9.7,9.7c1.7,0.6,3.4,0.9,5.3,0.9h23.4h10.2l3.9-10.6l0,0H192.7z M460.1,38.9v10.6h21.4v42.5h10.6V49.6h17.5l3.8-10.6H460.1z M541.6,68.2c-0.2,0.1-0.4,0.3-0.7,0.4C541.1,68.4,541.4,68.3,541.6,68.2L541.6,68.2z M554.3,60.2h-21.6v0l0,0c-2.9,0-5.3-2.4-5.3-5.3c0-2.9,2.4-5.3,5.3-5.3l0,0l0,0h33.6l3.8-10.6h-37.5l0,0c-6.9,0-12.8,4.4-15,10.6c-0.6,1.7-0.9,3.5-0.9,5.3c0,1.9,0.3,3.7,0.9,5.3c2.2,6.2,8.1,10.6,15,10.6h21.6l0,0c2.9,0,5.3,2.4,5.3,5.3c0,2.9-2.4,5.3-5.3,5.3l0,0h-37.5v10.6h37.5c6.9,0,12.8-4.4,15-10.6c0.6-1.7,0.9-3.5,0.9-5.3c0-1.9-0.3-3.7-0.9-5.3C567.2,64.6,561.3,60.2,554.3,60.2z",
              showAbove: false,
              offsetCenter: [0, "-35%"],
              size: 100,
              keepAspect: true,
              itemStyle: {
                color: "#5aabff",
              },
            },
            pointer: {
              icon: "path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z",
              width: 12,
              length: "55%",
              offsetCenter: [0, "8%"],
              itemStyle: {
                color: "#C0911F",
                shadowColor: "rgba(0, 0, 0, 0.3)",
                shadowBlur: 8,
                shadowOffsetX: 2,
                shadowOffsetY: 4,
              },
            },
            detail: {
              show: false,
            },
            title: {
              offsetCenter: [0, "30%"],
            },
            data: [
              {
                value: 0,
              },
            ],
          },
          {
            name: "minute",
            type: "gauge",
            startAngle: 90,
            endAngle: -270,
            min: 0,
            max: 60,
            clockwise: true,
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            pointer: {
              icon: "path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z",
              width: 8,
              length: "70%",
              offsetCenter: [0, "8%"],
              itemStyle: {
                color: "#C0911F",
                shadowColor: "rgba(0, 0, 0, 0.3)",
                shadowBlur: 8,
                shadowOffsetX: 2,
                shadowOffsetY: 4,
              },
            },
            anchor: {
              show: true,
              size: 20,
              showAbove: false,
              itemStyle: {
                borderWidth: 15,
                borderColor: "#C0911F",
                shadowColor: "rgba(0, 0, 0, 0.3)",
                shadowBlur: 8,
                shadowOffsetX: 2,
                shadowOffsetY: 4,
              },
            },
            detail: {
              show: false,
            },
            title: {
              offsetCenter: ["0%", "-40%"],
            },
            data: [
              {
                value: 0,
              },
            ],
          },
          {
            name: "second",
            type: "gauge",
            startAngle: 90,
            endAngle: -270,
            min: 0,
            max: 60,
            animationEasingUpdate: "bounceOut",
            clockwise: true,
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            pointer: {
              icon: "path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z",
              width: 4,
              length: "85%",
              offsetCenter: [0, "8%"],
              itemStyle: {
                color: "#C0911F",
                shadowColor: "rgba(0, 0, 0, 0.3)",
                shadowBlur: 8,
                shadowOffsetX: 2,
                shadowOffsetY: 4,
              },
            },
            anchor: {
              show: true,
              size: 15,
              showAbove: true,
              itemStyle: {
                color: "#C0911F",
                shadowColor: "rgba(0, 0, 0, 0.3)",
                shadowBlur: 8,
                shadowOffsetX: 2,
                shadowOffsetY: 4,
              },
            },
            detail: {
              show: false,
            },
            title: {
              offsetCenter: ["0%", "-40%"],
            },
            data: [
              {
                value: 0,
              },
            ],
          },
        ],
      };
      setInterval(function () {
        var date = 1;
        // var date = new Date();
        var second = date.getSeconds();
        var minute = date.getMinutes() + second / 60;
        var hour = (date.getHours() % 12) + minute / 60;
        option.animationDurationUpdate = 300;
        myChart.setOption({
          series: [
            {
              name: "hour",
              animation: hour !== 0,
              data: [{ value: hour }],
            },
            {
              name: "minute",
              animation: minute !== 0,
              data: [{ value: minute }],
            },
            {
              animation: second !== 0,
              name: "second",
              data: [{ value: second }],
            },
          ],
        });
      }, 1000);

      option && myChart.setOption(option);
    },
    next() {
      this.value3 += 1;
      if (this.value3 == 1) {
        setTimeout(() => {
          if (this.active++ > 5) this.active = 0;
          this.value3 = 0;
        }, 1000);
      }
    },
    // 点击全选
    selectAll() {
      // 判断 多选选项的数量 小于 列表总数量
      if (this.selectedArray.length < this.optionsrea.length) {
        // 先将选项的置空
        this.selectedArray = [];
        // 将列表的 name 都赋值给选项
        this.optionsrea.map((item) => {
          this.selectedArray.push(item.name);
        });
        // 赋值给鼠标进入事件要展示的数据
        this.DisplayText = this.selectedArray.toString(",");
        // 将全选选中
        this.selectedArray.unshift("全选");
      } else {
        // 否则置空选项
        this.selectedArray = [];
      }
    },
    // change 事件监听数据变化
    changeSelect(val) {
      // 如果没有点击全选，并且选项数据的长度 等于 列表数据的的长度
      if (!val.includes("全选") && val.length === this.optionsrea.length) {
        // 将全选选中
        this.selectedArray.unshift("全选");
      }
      // 或者全选选中，并且选项数据的长度 小于 列表数据的长度
      else if (
        val.includes("全选") &&
        val.length - 1 < this.optionsrea.length
      ) {
        // 就将选项数据过滤去掉全选
        this.selectedArray = this.selectedArray.filter((item) => {
          return item !== "全选";
        });
      }
      // 声明 add 等于 选项返回的数组
      let add = [...this.selectedArray];
      // 循环
      for (var i = 0; i < add.length; i++) {
        // 如果选项中有全选
        if (add[i] === "全选") {
          // 就将全选去掉
          add.splice(i, 1);
        }
      }
      // 然后赋值给鼠标进入要展示的数据
      this.DisplayText = add.toString(",");
    },
    // 点击关闭下拉框内展示的数据
    removeTag(val) {
      // 如果点击的是关闭全选
      if (val === "全选") {
        // 那么选项赋值为空
        this.selectedArray = [];
      }
    },
    a() {
      this.ShowAndHide = !this.ShowAndHide;
      if (this.ShowAndHide) {
        this.WrittenWords = "取消对比";
        this.value2 = "";
      } else {
        this.WrittenWords = "添加对比";
      }
    },
    DateFormat(add) {
      if (add == "date") {
        this.Format = "";
      }
      if (add == "week") {
        this.Format = "yyyy 第 WW 周";
      }
      if (add == "month") {
        this.Format = "yyyy 年 MM 月";
      }
      if (add == "year") {
        this.Format = "yyyy 年";
      }
    },
    MultiSelectAll() {
      for (let i = 0; i < this.options.length; i++) {
        console.log(this.options[i].label);
        this.SelectAll = this.options[i].label;
      }
    },
    vueres() {
      let date = new Date();
      let weekday = date.getDay() || 7;
      date.setDate(date.getDate() - weekday + 1);
      this.value7 = date.toLocaleDateString();

      console.log(0 || 7);
      this.value6 = this.value5.split("/");
      let add = this.value6.filter(function (s) {
        return s && s.trim();
      });
      this.value6 = add;
    },
    getdataTimeSec() {
      console.log(this.value4.length);
      for (let i = 0; i < this.value4.length; i++) {
        let time = new Date(this.value4[i]);
        let weekDay;
        let year = time.getFullYear();
        let month = time.getMonth() + 1;
        let day = time.getDate();
        //获取时分秒
        let h = time.getHours();
        let m = time.getMinutes();
        let s = time.getSeconds();
        //检查是否小于10
        //   h = check(h);
        //   m = check(m);
        //   s = check(s);
        let now_day = time.getDay();
        switch (now_day) {
          case 0:
            {
              weekDay = "星期日";
            }
            break;
          case 1:
            {
              weekDay = "星期一";
            }
            break;
          case 2:
            {
              weekDay = "星期二";
            }
            break;
          case 3:
            {
              weekDay = "星期三";
            }
            break;
          case 4:
            {
              weekDay = "星期四";
            }
            break;
          case 5:
            {
              weekDay = "星期五";
            }
            break;
          case 6:
            {
              weekDay = "星期六";
            }
            break;
          case 7:
            {
              weekDay = "星期日";
            }
            break;
        }
        let timeText =
          year +
          "年" +
          month +
          "月" +
          day +
          "日  " +
          " " +
          weekDay +
          " " +
          h +
          ":" +
          m +
          ":" +
          s;
        console.log(1);
        this.value5 += "/" + timeText;
      }
    },
  },
};
</script>

<style scoped>
/* .MyBackground{
  background-image: linear-gradient(to bottom right, rgb(218, 103, 103) , rgb(228, 228, 42));
} */
.demonstration {
  line-height: 40px;
  margin-right: 10px;
}
.el-date-editor.el-input {
  position: absolute;
  z-index: 10;
}
#add {
  position: relative;
}
.absute {
  position: absolute;
}
.box-card {
  width: 100%;
  height: 100%;
  /* height: 500px; */
  overflow: inherit;
  position: relative;
  background-image: linear-gradient(
    to bottom right,
    rgb(252, 132, 132),
    rgb(245, 245, 135)
  );
}
::v-deep .el-input__icon {
  height: 0;
}
::v-deep .el-date-editor .el-range__icon {
  line-height: 0;
}
.block {
  display: inline-block;
  margin-right: 10px;
}
.merge {
  display: inline-block;
  margin-right: 10px;
}
</style>
<style >
.el-radio-button__inner {
  padding: 12px, 50px !important;
}
</style>